<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../public/base.css">
    <script src="../../public/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContr">
    <div ng-controller="myCtr01">
        <p>{{obj.name}}</p>
        <p>{{obj.age}}</p>
        <p>{{obj.gender}}</p>
        公用的：<input type="text" ng-model="obj.name"><br>
        第一个控制器： <input type="text" ng-model="name">
        <p>第一个控制器：{{name}}</p>
    </div>
    <div ng-controller="myCtr02">
        <p>第二个控制器：{{obj1.name}}</p>
    </div>
    <mark>
        总结：如果私有的$scope=$rootScope下的公有对象，那么改变这个共有对象属性值的时候，会双向同步。
        如果指定了共有对象的属性值，那么就是一次赋值，不再有双向绑定。
    </mark>
</body>
<script>
var app=angular.module("myApp",[]);
//公共控制器
app.controller("myContr",function ($scope,$rootScope) {
    $rootScope.obj={
        name:"websong",
        age:23,
        gender:"男"
    }
});
//独立子组件控制器01
    app.controller("myCtr01",function ($scope,$rootScope) {
        $scope.name=$rootScope.obj.name;
    });
//独立子组件控制器02
    app.controller("myCtr02",function ($scope,$rootScope) {
        $scope.obj1=$rootScope.obj;
    })    
</script>
</html>